<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学习计划 - 诗词学习应用</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#8B4513',
            secondary: '#D2B48C',
            accent: '#A52A2A',
            light: '#F5F5DC',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
            serif: ['Noto Serif SC', 'serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
        .content-auto {
            content-visibility: auto;
        }
        .plan-card {
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            padding: 1rem;
            margin-bottom: 1rem;
            transition: all 300ms ease;
            &:hover {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
            }
        }
        .btn-primary {
            background-color: #8B4513;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            transition: all 300ms ease;
            &:hover {
                background-color: rgba(139, 69, 19, 0.8);
            }
            &:focus {
                outline: none;
                box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.5);
            }
        }
        .btn-secondary {
            background-color: #D2B48C;
            color: #8B4513;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            transition: all 300ms ease;
            &:hover {
                background-color: rgba(210, 180, 140, 0.8);
            }
            &:focus {
                outline: none;
                box-shadow: 0 0 0 2px rgba(210, 180, 140, 0.5);
            }
        }
        .nav-item {
            color: white;
            transition: color 300ms ease;
            &:hover {
                color: #D2B48C;
            }
        }
        .pagination-item {
            padding: 0.25rem 0.5rem;
            border-radius: 0.375rem;
            border: 1px solid #D1D5DB;
            margin: 0 0.25rem;
            transition: all 300ms ease;
            &:hover {
                background-color: #8B4513;
                color: white;
                border-color: #8B4513;
            }
        }
        .pagination-item.active {
            background-color: #8B4513;
            color: white;
            border-color: #8B4513;
        }
        .poem-item {
            display: flex;
            align-items: center;
            padding: 0.5rem;
            border-bottom: 1px solid #e2e8f0;
            &:last-child {
                border-bottom: none;
            }
        }
        .checkbox-container {
            display: block;
            position: relative;
            padding-left: 25px;
            margin-bottom: 12px;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .checkbox-container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 20px;
            width: 20px;
            background-color: #eee;
            border-radius: 3px;
        }
        .checkbox-container:hover input ~ .checkmark {
            background-color: #ccc;
        }
        .checkbox-container input:checked ~ .checkmark {
            background-color: #8B4513;
        }
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }
        .checkbox-container input:checked ~ .checkmark:after {
            display: block;
        }
        .checkbox-container .checkmark:after {
            left: 7px;
            top: 3px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    }
</style>
</head>
<body class="bg-light min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <nav class="bg-primary text-white shadow-lg sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-book text-2xl"></i>
        <h1 class="text-xl md:text-2xl font-bold">拾光诗栈</h1>
      </div>
      
      <div class="hidden md:flex space-x-8">
        <a href="index.html" class="nav-item flex items-center"><i class="fa fa-home mr-2"></i>首页</a>
        <a href="browse.html" class="nav-item flex items-center"><i class="fa fa-list mr-2"></i>诗词库</a>
        <a href="plan.html" class="nav-item flex items-center"><i class="fa fa-calendar mr-2"></i>学习计划</a>
        <a href="favorite.html" class="nav-item flex items-center"><i class="fa fa-heart mr-2"></i>我的收藏</a>
        <a href="login.html" class="nav-item flex items-center"><i class="fa fa-sign-in mr-2"></i>登录</a>
      </div>
      
      <div class="flex items-center space-x-4">
        <button id="mobile-menu-btn" class="md:hidden text-white focus:outline-none">
          <i class="fa fa-bars text-xl"></i>
        </button>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="md:hidden bg-primary/95 backdrop-blur-md hidden animate-fadeIn">
      <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
        <a href="index.html" class="nav-item py-2 border-b border-gray-700 flex items-center">
          <i class="fa fa-home mr-2 w-5"></i>首页
        </a>
        <a href="browse.html" class="nav-item py-2 border-b border-gray-700 flex items-center">
          <i class="fa fa-list mr-2 w-5"></i>诗词库
        </a>
        <a href="plan.html" class="nav-item py-2 border-b border-gray-700 flex items-center">
          <i class="fa fa-calendar mr-2 w-5"></i>学习计划
        </a>
        <a href="favorite.html" class="nav-item py-2 flex items-center">
          <i class="fa fa-heart mr-2 w-5"></i>我的收藏
        </a>
        <a href="login.html" class="nav-item py-2 flex items-center">
          <i class="fa fa-sign-in mr-2 w-5"></i>登录
        </a>
      </div>
    </div>
  </nav>

  <!-- 主要内容 -->
  <main class="flex-grow container mx-auto px-4 py-8">
    <!-- 进度条区域 -->
    <section class="mb-8 bg-white p-4 rounded-lg shadow">
      <div class="mb-4">
        <div class="flex justify-between mb-1">
          <span class="text-sm font-medium text-primary">总进度</span>
          <span class="text-sm font-medium text-gray-700" id="total-progress-text">0/0</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2.5">
          <div id="total-progress-bar" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div>
        </div>
      </div>
      <div>
        <div class="flex justify-between mb-1">
          <span class="text-sm font-medium text-primary">今日进度</span>
          <span class="text-sm font-medium text-gray-700" id="today-progress-text">0/0</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2.5">
          <div id="today-progress-bar" class="bg-accent h-2.5 rounded-full" style="width: 0%"></div>
        </div>
      </div>
    </section>

    <!-- 标题和添加计划按钮 -->
    <section class="mb-8 flex flex-col md:flex-row md:items-center md:justify-between">
      <h2 class="text-2xl md:text-3xl font-bold text-primary mb-4 md:mb-0">我的学习计划</h2>
      <button id="add-plan-btn" class="btn-primary flex items-center">
        <i class="fa fa-plus mr-2"></i>添加计划
      </button>
    </section>

    <!-- 学习计划列表 -->
    <section id="plans-container" class="mb-8">
      <!-- 学习计划卡片将由JavaScript动态生成 -->
    </section>
  </main>

  <!-- 添加/编辑计划模态框 -->
  <div id="plan-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-3xl max-h-[90vh] overflow-y-auto">
      <div class="p-6 border-b">
        <h3 class="text-xl font-bold text-primary" id="modal-title">添加学习计划</h3>
      </div>
      
      <div class="p-6">
        <div class="mb-4">
          <label for="plan-name" class="block text-sm font-medium text-gray-700 mb-1">计划名称</label>
          <input type="text" id="plan-name" class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="请输入计划名称">
        </div>
        
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">计划描述</label>
          <textarea id="plan-description" class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50" rows="3" placeholder="请输入计划描述"></textarea>
        </div>
        
        <div class="mb-4">
          <h4 class="font-medium text-gray-700 mb-2">已选诗词</h4>
          <div id="selected-poems" class="bg-gray-50 rounded-md p-3 max-h-40 overflow-y-auto">
            <!-- 已选诗词将通过JavaScript动态生成 -->
            <div class="text-gray-500 text-center py-4" id="no-selected-poems">暂无选择的诗词</div>
          </div>
        </div>
        
        <div>
          <h4 class="font-medium text-gray-700 mb-2">添加诗词</h4>
          <div class="relative mb-3">
            <input type="text" id="poem-search" class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="搜索诗词...">
            <button id="search-poems-btn" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500">
              <i class="fa fa-search"></i>
            </button>
          </div>
          
          <div id="available-poems" class="bg-gray-50 rounded-md p-3 max-h-60 overflow-y-auto">
            <!-- 可用诗词将通过JavaScript动态生成 -->
            <div class="text-gray-500 text-center py-4">请搜索诗词</div>
          </div>
        </div>
      </div>
      
      <div class="p-6 border-t flex justify-end space-x-3">
        <button id="cancel-plan-btn" class="btn-secondary">取消</button>
        <button id="save-plan-btn" class="btn-primary">保存</button>
      </div>
    </div>
  </div>

  <!-- 删除确认模态框 -->
  <div id="delete-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6">
      <h3 class="text-xl font-bold text-primary mb-4">确认删除</h3>
      <p class="text-gray-700 mb-6">你确定要删除这个学习计划吗？此操作不可撤销。</p>
      <div class="flex justify-end space-x-3">
        <button id="cancel-delete-btn" class="btn-secondary">取消</button>
        <button id="confirm-delete-btn" class="btn-primary">确认删除</button>
      </div>
    </div>
  </div>

  <!-- 页脚 -->
  <footer class="bg-primary text-white py-8">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div>
          <h3 class="text-xl font-bold mb-4">诗词学习</h3>
          <p class="text-gray-300">探索中国古典诗词的魅力，感受千年文化的积淀，提升文学素养。</p>
          <div class="flex space-x-4 mt-4">
            <a href="#" class="text-white hover:text-secondary transition-colors duration-300">
              <i class="fa fa-weibo text-xl"></i>
            </a>
            <a href="#" class="text-white hover:text-secondary transition-colors duration-300">
              <i class="fa fa-wechat text-xl"></i>
            </a>
            <a href="#" class="text-white hover:text-secondary transition-colors duration-300">
              <i class="fa fa-github text-xl"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h3 class="text-xl font-bold mb-4">快速链接</h3>
          <ul class="space-y-2">
            <li><a href="index.html" class="text-gray-300 hover:text-white transition-colors duration-300">首页</a></li>
            <li><a href="browse.html" class="text-gray-300 hover:text-white transition-colors duration-300">诗词库</a></li>
            <li><a href="plan.html" class="text-gray-300 hover:text-white transition-colors duration-300">学习计划</a></li>
            <li><a href="favorite.html" class="text-gray-300 hover:text-white transition-colors duration-300">我的收藏</a></li>
            <li><a href="login.html" class="text-gray-300 hover:text-white transition-colors duration-300">登录</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="text-xl font-bold mb-4">联系我们</h3>
          <ul class="space-y-2">
            <li class="flex items-start">
              <i class="fa fa-envelope-o mt-1 mr-2"></i>
              <span class="text-gray-300">contact@shicixuexi.com</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-phone mt-1 mr-2"></i>
              <span class="text-gray-300">400-123-4567</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-map-marker mt-1 mr-2"></i>
              <span class="text-gray-300">北京市海淀区中关村南大街5号</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
        <p>&copy; 2025 诗词学习平台. 保留所有权利.</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 移动端菜单切换
    document.getElementById('mobile-menu-btn').addEventListener('click', function() {
      const mobileMenu = document.getElementById('mobile-menu');
      mobileMenu.classList.toggle('hidden');
    });
    
    // 模拟数据 - 诗词库
    const poems = [
      {
        id: 1,
        title: "静夜思",
        dynasty: "唐",
        author: "李白",
        content: "床前明月光，疑是地上霜。\n举头望明月，低头思故乡。",
        category: "思乡"
      },
      {
        id: 2,
        title: "春望",
        dynasty: "唐",
        author: "杜甫",
        content: "国破山河在，城春草木深。\n感时花溅泪，恨别鸟惊心。\n烽火连三月，家书抵万金。\n白头搔更短，浑欲不胜簪。",
        category: "爱国"
      },
      {
        id: 3,
        title: "相见欢",
        dynasty: "五代",
        author: "李煜",
        content: "无言独上西楼，月如钩。\n寂寞梧桐深院锁清秋。\n剪不断，理还乱，是离愁。\n别是一般滋味在心头。",
        category: "离愁"
      },
      {
        id: 4,
        title: "望庐山瀑布",
        dynasty: "唐",
        author: "李白",
        content: "日照香炉生紫烟，遥看瀑布挂前川。\n飞流直下三千尺，疑是银河落九天。",
        category: "山水"
      },
      {
        id: 5,
        title: "登鹳雀楼",
        dynasty: "唐",
        author: "王之涣",
        content: "白日依山尽，黄河入海流。\n欲穷千里目，更上一层楼。",
        category: "哲理"
      },
      {
        id: 6,
        title: "水调歌头·明月几时有",
        dynasty: "宋",
        author: "苏轼",
        content: "明月几时有？把酒问青天。\n不知天上宫阙，今夕是何年。\n我欲乘风归去，又恐琼楼玉宇，高处不胜寒。\n起舞弄清影，何似在人间？\n转朱阁，低绮户，照无眠。\n不应有恨，何事长向别时圆？\n人有悲欢离合，月有阴晴圆缺，此事古难全。\n但愿人长久，千里共婵娟。",
        category: "中秋"
      },
      // 元曲
      {
        id: 7,
        title: "天净沙·秋思",
        dynasty: "元",
        author: "马致远",
        content: "枯藤老树昏鸦，小桥流水人家，古道西风瘦马。夕阳西下，断肠人在天涯。",
        category: "思乡"
      },
      {
        id: 8,
        title: "山坡羊·潼关怀古",
        dynasty: "元",
        author: "张养浩",
        content: "峰峦如聚，波涛如怒，山河表里潼关路。望西都，意踌躇。伤心秦汉经行处，宫阙万间都做了土。兴，百姓苦；亡，百姓苦！",
        category: "爱国"
      },
      // 明清诗词
      {
        id: 9,
        title: "登金陵雨花台望大江",
        dynasty: "明",
        author: "高启",
        content: "大江来从万山中，山势尽与江流东。钟山如龙独西上，欲破巨浪乘长风。江山相雄不相让，形胜争夸天下壮。秦皇空此瘗黄金，佳气葱葱至今王。我怀郁塞何由开，酒酣走上城南台；坐觉苍茫万古意，远自荒烟落日之中来！石头城下涛声怒，武骑千群谁敢渡？黄旗入洛竟何祥，铁锁横江未为固。前三国，后六朝，草生宫阙何萧萧。英雄乘时务割据，几度战血流寒潮。我生幸逢圣人起南国，祸乱初平事休息。从今四海永为家，不用长江限南北。",
        category: "爱国"
      },
      {
        id: 10,
        title: "长相思·山一程",
        dynasty: "清",
        author: "纳兰性德",
        content: "山一程，水一程，身向榆关那畔行，夜深千帐灯。风一更，雪一更，聒碎乡心梦不成，故园无此声。",
        category: "思乡"
      }
    ];

    // 模拟数据 - 学习计划
    let learningPlans = [
      {
        id: 1,
        name: "唐诗三百首精选",
        description: "精选唐代经典诗词，感受盛唐气象",
        poemIds: [1, 2, 4, 5]
      },
      {
        id: 2,
        name: "思乡主题诗词",
        description: "离家在外，借诗词寄托思乡之情",
        poemIds: [7, 10]
      },
      {
        id: 3,
        name: "爱国情怀",
        description: "感受古人的家国情怀",
        poemIds: [ 8, 9]
      }
    ];

    // 当前操作的计划ID
    let currentPlanId = null;
    // 当前选中的诗词ID数组
    let selectedPoemIds = [];
    // 当前今日学习计划ID
    let todayPlanId = null;
    // 已学习的诗词ID数组
    let learnedPoemIds = [];

    // DOM元素
    const plansContainer = document.getElementById('plans-container');
    const addPlanBtn = document.getElementById('add-plan-btn');
    const planModal = document.getElementById('plan-modal');
    const modalTitle = document.getElementById('modal-title');
    const planNameInput = document.getElementById('plan-name');
    const planDescriptionInput = document.getElementById('plan-description');
    const selectedPoemsContainer = document.getElementById('selected-poems');
    const noSelectedPoems = document.getElementById('no-selected-poems');
    const availablePoemsContainer = document.getElementById('available-poems');
    const poemSearchInput = document.getElementById('poem-search');
    const searchPoemsBtn = document.getElementById('search-poems-btn');
    const savePlanBtn = document.getElementById('save-plan-btn');
    const cancelPlanBtn = document.getElementById('cancel-plan-btn');
    const deleteModal = document.getElementById('delete-modal');
    const cancelDeleteBtn = document.getElementById('cancel-delete-btn');
    const confirmDeleteBtn = document.getElementById('confirm-delete-btn');

    // 初始化页面
    function init() {
      renderLearningPlans();
      setupEventListeners();
    }

    // 设置事件监听器
    function setupEventListeners() {
      // 添加计划按钮
      addPlanBtn.addEventListener('click', openAddPlanModal);
      
      // 取消计划按钮
      cancelPlanBtn.addEventListener('click', closePlanModal);
      
      // 保存计划按钮
      savePlanBtn.addEventListener('click', savePlan);
      
      // 诗词搜索按钮
      searchPoemsBtn.addEventListener('click', searchPoems);
      
      // 诗词搜索输入框回车事件
      poemSearchInput.addEventListener('keyup', function(event) {
        if (event.key === 'Enter') {
          searchPoems();
        }
      });
      
      // 取消删除按钮
      cancelDeleteBtn.addEventListener('click', closeDeleteModal);
      
      // 确认删除按钮
      confirmDeleteBtn.addEventListener('click', deletePlan);
    }

    // 渲染学习计划列表
    function renderLearningPlans() {
      plansContainer.innerHTML = '';
      
      if (learningPlans.length === 0) {
        plansContainer.innerHTML = `
          <div class="text-center py-12">
            <i class="fa fa-book text-4xl text-gray-400 mb-4"></i>
            <p class="text-gray-600">您还没有创建任何学习计划</p>
            <button id="empty-add-plan-btn" class="btn-primary mt-4">
              <i class="fa fa-plus mr-2"></i>创建学习计划
            </button>
          </div>
        `;
        
        document.getElementById('empty-add-plan-btn').addEventListener('click', openAddPlanModal);
        return;
      }
      
      learningPlans.forEach(plan => {
        const planCard = document.createElement('div');
        planCard.className = 'plan-card';
        planCard.innerHTML = `
          <div class="flex justify-between items-start mb-3">
            <div>
              <h3 class="text-lg font-bold text-primary flex items-center">
                ${plan.name}
              </h3>
              <p class="text-gray-600 text-sm">${plan.description}</p>
            </div>
            <div class="flex space-x-2">
              <button class="text-gray-500 hover:text-primary transition-colors" data-id="${plan.id}" data-action="edit">
                <i class="fa fa-pencil"></i>
              </button>
              <button class="text-gray-500 hover:text-red-500 transition-colors" data-id="${plan.id}" data-action="delete">
                <i class="fa fa-trash"></i>
              </button>
            </div>
          </div>
          <div class="mb-3">
            <div class="text-sm font-medium text-gray-700 mb-1">包含诗词:</div>
            <div class="flex flex-wrap gap-2">
              ${getPlanPoems(plan).map(poem => `
                <span class="px-2 py-1 bg-gray-100 rounded text-sm cursor-pointer hover:bg-orange-100 ${isPoemLearned(poem.id) ? 'bg-orange-200' : ''}" 
                      data-id="${poem.id}" data-plan="${plan.id}">${poem.title} (${poem.author})</span>
              `).join('')}
            </div>
          </div>
          <div class="flex justify-between items-center">
            <button class="btn-secondary text-sm py-1 px-2" data-id="${plan.id}" data-action="set-today">
              ${isTodayPlan(plan.id) ? '取消今日计划' : '设为今日计划'}
            </button>
            <div id="learned-count-${plan.id}" class="text-sm text-gray-500">
              已学习: ${getLearnedCount(plan)}/${plan.poemIds.length}
            </div>
          </div>

        `;

       

        // 添加编辑和删除按钮事件
        const editBtn = planCard.querySelector('[data-action="edit"]');
        const deleteBtn = planCard.querySelector('[data-action="delete"]');
        
        editBtn.addEventListener('click', function() {
          const planId = parseInt(this.getAttribute('data-id'));
          openEditPlanModal(planId);
        });
        
        deleteBtn.addEventListener('click', function() {
          const planId = parseInt(this.getAttribute('data-id'));
          openDeleteModal(planId);
        });
        
        // 添加诗词点击事件
        const poemElements = planCard.querySelectorAll('[data-id][data-plan]');
        poemElements.forEach(el => {
          el.addEventListener('click', function() {
            const poemId = parseInt(this.getAttribute('data-id'));
            const planId = parseInt(this.getAttribute('data-plan'));
            togglePoemLearned(poemId, planId);
          });
        });
        
        // 添加设为今日计划按钮事件
        const setTodayBtn = planCard.querySelector('[data-action="set-today"]');
        setTodayBtn.addEventListener('click', function() {
          const planId = parseInt(this.getAttribute('data-id'));
          setTodayPlan(planId);
        });
        
        plansContainer.appendChild(planCard);
      });
      
      updateProgressBars();
    }

    // 获取计划中的诗词
    function getPlanPoems(plan) {
      return plan.poemIds.map(id => poems.find(poem => poem.id === id));
    }

    // 打开添加计划模态框
    function openAddPlanModal() {
      currentPlanId = null;
      modalTitle.textContent = '添加学习计划';
      planNameInput.value = '';
      planDescriptionInput.value = '';
      selectedPoemIds = [];
      renderSelectedPoems();
      availablePoemsContainer.innerHTML = '<div class="text-gray-500 text-center py-4">请搜索诗词</div>';
      planModal.classList.remove('hidden');
    }

    // 打开编辑计划模态框
    function openEditPlanModal(planId) {
      const plan = learningPlans.find(p => p.id === planId);
      if (!plan) return;
      
      currentPlanId = planId;
      modalTitle.textContent = '编辑学习计划';
      planNameInput.value = plan.name;
      planDescriptionInput.value = plan.description;
      selectedPoemIds = [...plan.poemIds];
      renderSelectedPoems();
      availablePoemsContainer.innerHTML = '<div class="text-gray-500 text-center py-4">请搜索诗词</div>';
      planModal.classList.remove('hidden');
    }

    // 关闭计划模态框
    function closePlanModal() {
      planModal.classList.add('hidden');
    }

    // 打开删除确认模态框
    function openDeleteModal(planId) {
      currentPlanId = planId;
      deleteModal.classList.remove('hidden');
    }

    // 关闭删除确认模态框
    function closeDeleteModal() {
      currentPlanId = null;
      deleteModal.classList.add('hidden');
    }


    // 保存计划
    function savePlan() {
      const planName = planNameInput.value.trim();
      const planDescription = planDescriptionInput.value.trim();
      
      if (!planName) {
        alert('请输入计划名称');
        return;
      }
      
      if (selectedPoemIds.length === 0) {
        alert('请至少选择一首诗词');
        return;
      }
      
      if (currentPlanId === null) {
        // 添加新计划
        const newPlan = {
          id: Date.now(), // 使用时间戳作为唯一ID
          name: planName,
          description: planDescription,
          poemIds: selectedPoemIds
        };
        
        learningPlans.push(newPlan);
      } else {
        // 编辑现有计划
        const planIndex = learningPlans.findIndex(p => p.id === currentPlanId);
        if (planIndex !== -1) {
          learningPlans[planIndex] = {
            ...learningPlans[planIndex],
            name: planName,
            description: planDescription,
            poemIds: selectedPoemIds
          };
        }
      }
      
      renderLearningPlans();
      closePlanModal();
    }

    // 删除计划
    function deletePlan() {
      if (currentPlanId !== null) {
        learningPlans = learningPlans.filter(p => p.id !== currentPlanId);
        if (todayPlanId === currentPlanId) {
          todayPlanId = null;
        }
        renderLearningPlans();
      }
      closeDeleteModal();
    }

    // 搜索诗词
    function searchPoems() {
      const searchTerm = poemSearchInput.value.trim().toLowerCase();
      
      if (!searchTerm) {
        availablePoemsContainer.innerHTML = '<div class="text-gray-500 text-center py-4">请输入搜索关键词</div>';
        return;
      }
      
      const filteredPoems = poems.filter(poem => 
        poem.title.toLowerCase().includes(searchTerm) || 
        poem.author.toLowerCase().includes(searchTerm) || 
        poem.dynasty.toLowerCase().includes(searchTerm)
      );
      
      if (filteredPoems.length === 0) {
        availablePoemsContainer.innerHTML = '<div class="text-gray-500 text-center py-4">没有找到匹配的诗词</div>';
        return;
      }
      
      renderAvailablePoems(filteredPoems);
    }

    // 渲染已选诗词
    function renderSelectedPoems() {
      selectedPoemsContainer.innerHTML = '';
      
      if (selectedPoemIds.length === 0) {
        noSelectedPoems.classList.remove('hidden');
        return;
      }
      
      noSelectedPoems.classList.add('hidden');
      
      selectedPoemIds.forEach(poemId => {
        const poem = poems.find(p => p.id === poemId);
        if (poem) {
          const poemItem = document.createElement('div');
          poemItem.className = 'poem-item justify-between';
          poemItem.innerHTML = `
            <div class="flex items-center">
              <span class="text-gray-700">${poem.title} - ${poem.author} (${poem.dynasty})</span>
            </div>
            <button class="text-gray-400 hover:text-red-500 transition-colors" data-id="${poem.id}">
              <i class="fa fa-times"></i>
            </button>
          `;
          
          // 添加移除按钮事件
          const removeBtn = poemItem.querySelector('button');
          removeBtn.addEventListener('click', function() {
            const id = parseInt(this.getAttribute('data-id'));
            selectedPoemIds = selectedPoemIds.filter(pId => pId !== id);
            renderSelectedPoems();
          });
          
          selectedPoemsContainer.appendChild(poemItem);
        }
      });
    }

    // 渲染可用诗词
    function renderAvailablePoems(poemsList) {
      availablePoemsContainer.innerHTML = '';
      
      poemsList.forEach(poem => {
        const isSelected = selectedPoemIds.includes(poem.id);
        
        const poemItem = document.createElement('div');
        poemItem.className = 'poem-item';
        poemItem.innerHTML = `
          <label class="checkbox-container flex items-center w-full">
            <span class="flex-grow">${poem.title} - ${poem.author} (${poem.dynasty})</span>
            <input type="checkbox" ${isSelected ? 'checked' : ''} data-id="${poem.id}">
            <span class="checkmark"></span>
          </label>
        `;
        
        // 添加复选框事件
        const checkbox = poemItem.querySelector('input');
        checkbox.addEventListener('change', function() {
          const id = parseInt(this.getAttribute('data-id'));
          
          if (this.checked) {
            if (!selectedPoemIds.includes(id)) {
              selectedPoemIds.push(id);
            }
          } else {
            selectedPoemIds = selectedPoemIds.filter(pId => pId !== id);
          }
          
          renderSelectedPoems();
        });
        
        availablePoemsContainer.appendChild(poemItem);
      });
    }

    // 检查诗词是否已学习
    function isPoemLearned(poemId) {
      return learnedPoemIds.includes(poemId);
    }

    // 检查计划是否为今日计划
    function isTodayPlan(planId) {
      return todayPlanId === planId;
    }

    // 获取计划中已学习的诗词数量
    function getLearnedCount(plan) {
      return plan.poemIds.filter(id => learnedPoemIds.includes(id)).length;
    }

    // 更新进度条
    function updateProgressBars() {
      // 计算总进度
      const totalPoems = learningPlans.reduce((sum, plan) => sum + plan.poemIds.length, 0);
      const totalLearned = learnedPoemIds.length;
      const totalPercentage = totalPoems > 0 ? Math.round((totalLearned / totalPoems) * 100) : 0;
      
      document.getElementById('total-progress-bar').style.width = `${totalPercentage}%`;
      document.getElementById('total-progress-text').textContent = `${totalLearned}/${totalPoems}`;
      
      // 计算今日进度
      const todayPlan = learningPlans.find(plan => plan.id === todayPlanId);
      if (todayPlan) {
        const todayTotal = todayPlan.poemIds.length;
        const todayLearned = todayPlan.poemIds.filter(id => learnedPoemIds.includes(id)).length;
        const todayPercentage = todayTotal > 0 ? Math.round((todayLearned / todayTotal) * 100) : 0;
        
        document.getElementById('today-progress-bar').style.width = `${todayPercentage}%`;
        document.getElementById('today-progress-text').textContent = `${todayLearned}/${todayTotal}`;
      } else {
        document.getElementById('today-progress-bar').style.width = '0%';
        document.getElementById('today-progress-text').textContent = '0/0';
      }
    }

    // 切换诗词学习状态
    function togglePoemLearned(poemId, planId) {
      if (learnedPoemIds.includes(poemId)) {
        learnedPoemIds = learnedPoemIds.filter(id => id !== poemId);
      } else {
        learnedPoemIds.push(poemId);
      }
      
      // 更新UI
      const poemElement = document.querySelector(`[data-id="${poemId}"][data-plan="${planId}"]`);
      if (poemElement) {
        poemElement.classList.toggle('bg-orange-200');
      }
      
      // 更新计划卡片中的已学习计数
      const learnedCountElement = document.getElementById(`learned-count-${planId}`);
      if (learnedCountElement) {
        const plan = learningPlans.find(p => p.id === planId);
        learnedCountElement.textContent = `已学习: ${getLearnedCount(plan)}/${plan.poemIds.length}`;
      }
      
      updateProgressBars();
    }

    // 设置为今日计划
    function setTodayPlan(planId) {
      if (todayPlanId === planId) {
        todayPlanId = null;
      } else {
        todayPlanId = planId;
      }
      renderLearningPlans();
      updateProgressBars();
    }

    // 初始化页面
    init();
  </script>
</body>
</html>
    